<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        placeholder="昵称"
        style="width:200px"
        class="filter-item"
        size="mini"
        clearable
        @keyup.enter.native="handleFilter"
        @clear="handleFilter"
        @blur="handleFilter"
      />
      <el-input
        v-model="listQuery.account"
        placeholder="账号"
        style="width:200px"
        class="filter-item"
        size="mini"
        clearable
        @keyup.enter.native="handleFilter"
        @clear="handleFilter"
        @blur="handleFilter"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        size="mini"
        style="margin-left:10px;"
        @click="handleFilter"
      >查询</el-button>
      <el-alert
        title="此处添加的新用户采用默认密码"
        type="warning"
        effect="dark"
        size="mini"
      />
      <el-dialog :title="operation?'新增':'编辑'" :visible.sync="dialogFormVisible">
        <el-form v-model="form">
          <el-form-item label="账号" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="昵称" :label-width="formLabelWidth">
            <el-input v-model="form.nickName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="真名" :label-width="formLabelWidth">
            <el-input v-model="form.realName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-radio v-model="form.sex" :label="0">保密</el-radio>
            <el-radio v-model="form.sex" :label="1">男</el-radio>
            <el-radio v-model="form.sex" :label="2">女</el-radio>
          </el-form-item>
          <el-form-item label="头像" :label-width="formLabelWidth">
            <el-upload
              v-model="form.avatar"
              class="avatar-uploader"
              action="#"
              :http-request="UploadImage"
              :show-file-list="false"
              accept="image/jpeg,image/png,image/jpg"
              :on-success="handleAvatarSuccess"
            >
              <img
                v-if="hasAvatar"
                :src="form.avatar"
                class="avatar"
              >
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item label="介绍" :label-width="formLabelWidth">
            <el-input v-model="form.introduction" autocomplete="off" />
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="form.email" autocomplete="off" />
          </el-form-item>
          <el-form-item label="手机" :label-width="formLabelWidth">
            <el-input v-model="form.mobile" autocomplete="off" />
          </el-form-item>
          <el-form-item label="权限" :label-width="formLabelWidth">
            <el-radio v-model="form.authority" :label="0">管理员</el-radio>
            <el-radio v-model="form.authority" :label="1">教师</el-radio>
            <el-radio v-model="form.authority" :label="2">学生</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUser">确 定</el-button>
        </div>
      </el-dialog>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        size="mini"
        style="margin-left:10px;"
        @click="newUser"
      >新增</el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoadding"
      :data="list"
      size="mini"
      border
      fit
      highlight-current-row
      style="width:100%"
      @sort-change="sortChange"
    >
      <el-table-column
        label="序号"
        prop="id"
        sortable="custom"
        align="center"
        width="80"
      >
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column
        label="账号"
        align="center"
        width="120"
      >
        <template slot-scope="{ row: { name }}">
          <span>{{ name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="昵称"
        align="center"
        width="120"
      >
        <template slot-scope="{ row: { nickName }}">
          <span>{{ nickName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="性别"
        align="center"
        width="80"
      >
        <template slot-scope="{ row: { sex }}">
          <span>{{ sex==0?'保密':sex==1?'男':'女' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="真名"
        align="center"
        width="120"
      >
        <template slot-scope="{ row: { realName }}">
          <span>{{ realName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="头像"
        align="center"
        width="120"
      >
        <template slot-scope="{ row: { avatar }}">
          <img :src="avatar" style="width:50px;height:50px;" alt="">
        </template>
      </el-table-column>
      <el-table-column
        label="介绍"
        align="center"
        width="120"
      >
        <template slot-scope="{ row: { introduction }}">
          <span>{{ introduction }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="邮箱"
        align="center"
        width="120"
      >
        <template slot-scope="{ row: { email }}">
          <span>{{ email }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="电话"
        align="center"
        width="120"
      >
        <template slot-scope="{ row: { mobile }}">
          <span>{{ mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="角色"
        align="center"
        width="120"
      >
        <template slot-scope="{ row: { authority }}">
          <span>{{ authority==0?'管理员':authority==1?'教师':'学生' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="275"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editUser(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="deleteData(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>=0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="handlePageList" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import waves from '@/directive/waves'
import { getUsertList, deleteUser, saveUser } from '@/api/user'
import { UploadImage } from '@/api/course'
export default {
  inject: ['reload'],
  components: {
    Pagination
  },
  directives: {
    waves
  },
  data() {
    return {
      tableKey: 0,
      listLoadding: true,
      list: [],
      total: 0,
      listQuery: {
      },
      dialogFormVisible: false,
      data: [],
      studentList: [],
      operation: true,
      formLabelWidth: '120px',
      hasAvatar: false,
      form: {
        id: '',
        name: '',
        nickName: '',
        realName: '',
        sex: '',
        avatar: '',
        introduction: '',
        email: '',
        mobile: '',
        authority: ''
      },
      value: [],
      renderFunc(h, option) {
        return <span>{ option.key } - { option.label }</span>
      }
    }
  },
  created() {
    this.parseQuery()
  },
  mounted() {
    this.getList()
  },
  methods: {
    parseQuery() {
      // 解析查询条件
      const liatQuery = {
        page: 1,
        pageSize: 10
      }
      // 合并查询条件
      this.listQuery = { ...liatQuery, ...this.listQuery }
    },
    getList() {
      this.listLoadding = true
      // 调用接口
      getUsertList(this.listQuery).then(response => {
        console.log(response.data)
        this.list = response.data.content
        this.total = response.data.totalSize
      })
      this.listLoadding = false
    },
    handleFilter() {
      this.getList()
    },
    // 点击不同页时调用的方法
    handlePageList() {
      this.list = this.getList()
    },
    sortChange(data) {
      console.log('排序' + data)
    },
    handleChange(value, direction, movedKeys) {
      console.log(this.value)
    },
    newUser() {
      this.dialogFormVisible = true
      this.form = []
    },
    addUser() {
      // 创建用户
      const form = Object.assign({}, this.form)
      saveUser(form).then(response => {
        this.$message({
          type: 'success',
          message: this.operation ? '新增成功' : '编辑成功'
        })
        this.reload()
        this.dialogFormVisible = false
      }).catch(response => {
        this.$message({
          type: 'error',
          message: this.operation ? '新增失败' : '编辑失败'
        })
      })
    },
    editUser(row) {
      this.dialogFormVisible = true
      this.hasAvatar = true
      this.form = row
      this.operation = false
    },
    deleteData(row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用接口
        deleteUser(row.id).then(response => {
          this.reload()
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    UploadImage(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      UploadImage(formData).then(response => {
        console.log('上传图片成功')
        this.$notify({
          title: '成功',
          message: response.msg,
          type: 'success',
          duration: 2000 })
        this.form.avatar = response.msg
        this.hasAvatar = true
      }).catch(response => {
        console.log(response.msg)
        console.log('图片上传失败')
        this.hasAvatar = false
        this.$notify({
          title: '失败',
          message: response.msg,
          type: 'error',
          duration: 2000 })
      })
    },
    handleAvatarSuccess(res, file) {
      // 图片上传，成功返回图片地址
      this.form.avatar = URL.createObjectURL(file.raw)
      this.hasAvatar = true
    }
  }
}
</script>

<style>
.transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
.el-transfer-panel{
  width: 440px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
